<template>
<div class="page-container">
    <div class="common-content">
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right">
                <el-row class="search-input">
                    <el-form-item label="仓库：">
                        <el-input v-model="searchFilters.warehouseCode" placeholder="请输入仓库编码或仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="库位：">
                        <el-input v-model="searchFilters.location" placeholder="请输入库位"></el-input>
                    </el-form-item>
                    <el-form-item label="盘点状态：">
                        <el-select v-model="searchFilters.checkStatus" placeholder="请选择">
                            <el-option v-for="item in checkStatusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker v-model="searchFilters.createTime" type="datetime" placeholder="开始时间起" style="width:400px" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属商家：">
                        <el-select v-model="searchFilters.deptId" placeholder="请选择">
                            <el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

                <el-row class="search-button">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row class="t_r w100">
                <el-button-group>
                    <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                </el-button-group>
            </el-row>
            <!-- 表格数据部分 -->
            <div class="table-wrap">
                <el-table :data="tableData" :size="size" align="align" style="width: 100%" :max-height="450" :stripe="true">
                    <el-table-column prop="code" label="单据编号" sortable></el-table-column>
                    <el-table-column prop="storeName" label="仓库名称" sortable></el-table-column>
                    <el-table-column prop="storeCode" label="仓库编码" sortable></el-table-column>
                    <el-table-column prop="location" label="库位" sortable></el-table-column>
                    <el-table-column prop="deptName" label="商家" sortable></el-table-column>
                    <el-table-column prop="checkStatus" label="盘点状态" :formatter="statusFormatter" sortable></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
                    <el-table-column prop="updateTime" label="最后更新时间" sortable></el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.checkStatus==0" type="text" size="small" @click="handleDelete(scope)">删除</el-button>
                            <el-button v-if="scope.row.checkStatus==0" type="text" size="small" @click="handleCheck(scope)">初盘</el-button>
                            <el-button v-if="scope.row.checkStatus==1" type="text" size="small" @click="handleCheck(scope)">复盘</el-button>
                            <el-button v-if="scope.row.checkStatus==2" type="text" size="small" @click="handleCheck(scope)">差异确认</el-button>
                            <el-button v-if="scope.row.checkStatus==3" type="text" size="small" @click="handleCheck(scope)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页栏v-if="scope.row.status == 1"-->
                <div class="toolbar" style="padding:10px;">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" @current-change="refreshPageRequest" :current-page="pageRequest.pageNum" :page-size="pageRequest.limit" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import axios from "axios";
export default {

    components: {},

    data() {
        return {
            checkStatusOption: [{
                label: "盘点中",
                value: "1"
            }, {
                label: "已关闭",
                value: "3"
            }],
            deptData: [],
            operates: [],
            tableData: [],
            totalSize: 0,
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            searchSize: "mini",
            size: "small",
            searchFilters: {
                location: null,
                deptId: null,
                status: null,
            }
        };
    },

    methods: {
        //单据状态Formatter
        statusFormatter: function (row, column, cellValue, index) {
            if (cellValue == 0) {
                return "待初盘"
            } else if (cellValue == 1) {
                return "待复盘"
            } else if (cellValue == 2) {
                return "待确认"
            } else {
                return "已关闭"
            }
        },

        search: function () {
            this.pageRequest.pageNum = 1
            this.findPage();
        },

        findPage(pageNum) {
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }
            this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.listOperateAndProductPage(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableData = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        handleDelete: function (params) {
            let this_ = this
            this.utils.request.deleteOperateStore({
                id: params.row.id
            }, function (res) {
                if (res.code === "0000") {
                    this_.$message({
                        message: "操作成功",
                        type: "success"
                    });
                } else {
                    this_.$message({
                        message: "操作失败, " + res.msg,
                        type: "error"
                    });
                }
                this_.findPage()
            });
        },

        handleCheck(params) {
            if (params.row.checkStatus == 0) {
                this.$router.push({
                    path: "/getMStoreCheckDetail/" + params.row.id + "/1"
                });
            } else if (params.row.checkStatus == 1) {
                this.$router.push({
                    path: "/getMStoreCheckDetail/" + params.row.id + "/2"
                });
            } else if (params.row.checkStatus == 2) {
                this.$router.push({
                    path: "/getMStoreCheckDetail/" + params.row.id + "/3"
                });
            } else {
                this.$router.push({
                    path: "/getMStoreCheckDetail/" + params.row.id + "/4"
                });
            }
        },

        addForm(params) {
            this.$router.push({
                path: "/getMStoreCheckDetail/0/0"
            });
        },

        //导出
        exportData() {
            let this_ = this;
            axios({
                    method: "post",
                    url: "http://localhost:8087/jic-product/productExcel/uploadStoreOperate",
                    data: this_.searchFilters,
                    responseType: "blob"
                })
                .then(res => {
                    console.log(res);
                    const link = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    });
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    let excelName = this_.returnExcelName();
                    link.setAttribute("download", excelName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
                .catch(error => {});
        },

        //返回文件名
        returnExcelName: function () {
            let excelName = "库内事务数据导出.xls";
            return excelName;
        },

        //获取操作类型
        getOperate() {
            let this_ = this;
            this.utils.request.getOperateList({}, function (res) {
                if (res.code === "0000") {
                    this_.operates = res.data;
                } else {
                    this_.$message({
                        message: "操作失败, " + data.msg,
                        type: "error"
                    });
                }
            });
        },

        //获取所属商家
        getDeptList: function () {
            let this_ = this
            this.utils.request.queryDeptList({}, function (res) {
                if (res.code == "0000") {
                    this_.deptData = res.data;
                }
            });
        },

        // 每页数据刷新
        refreshPageRequest: function (pageNum) {
            this.pageRequest.pageNum = pageNum;
            this.findPage()
        },

        // 每页条数刷新
        handleSizeChange: function (pageSize) {
            this.pageRequest.pageSize = pageSize;
            this.findPage()
        },
    },
    mounted() {
        this.findPage();
        this.getOperate();
        this.getDeptList()
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }
    }

    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
